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¿Así que quieres crear tus propias apps para 
móvil en Android? ¡Es una idea maravillosa! 


Crear aplicaciones para móvil puede ser muy 
divertido. Puedes hacer sencillas apps que 
proporcionen información; aplicaciones divertidas 
que permitan jugar con imágenes, sonidos y dibujos, 
e incluso crear juegos. El mundo de las apps para 
móvil es enorme, y el único límite es tu imaginación. 
Este libro te guía por el proceso de creación de 
aplicaciones para móvil con un software del MIT 
lamado App Inventor; es gratis y lo pueden usar 
personas de cualquier edad. Con solo hacer clic y 
arrastrar puedes construir una aplicación para móvil 
y, al mismo tiempo, japrender a programar! 


ACERCA DE APP INVENTOR 


App Inventor es una página web que hace que crear 
aplicaciones para móvil sea fácil y divertido. Se 
divide en dos partes: el diseno y los bloques. La 
parte de diseno es aquella en la que creas el 
aspecto visual: dónde irán los botones, de qué color 
será, qué fotos anadirás o qué dibujos y sonidos 


crearás. La parte de los bloques es aquella en la que 
programas el código para que la aplicación haga 
cosas; por ejemplo, has de decirle a tu aplicación 
que reproduzca el sonido de un ladrido cada vez que 
alguien haga clic en el botón del perro. Aunque la 
parte de los bloques es auténtica programación, App 
Inventor hace que sea fácil poner el código en 
«bloques de programación» que puedes arrastrar 
para crear tu aplicación. ¡Esto hace que todo el 
proceso sea fácil y divertido! 


ACERCA DE ESTE LIBRO 


Crea una app para móvil te presenta cuatro 
proyectos que te guían por el proceso de 
construcción de cuatro aplicaciones para móvil 
diferentes. Primero crearás una sencilla aplicación 
que reproduce un sonido cuando aprietas un botón. 
De ahí pasarás a crear una app que sea un perfil 
tuyo. En el tercer proyecto añadirás funciones a tu 
aplicación de perfil, de modo que los demás puedan 
dibujar sobre tus imágenes favoritas, haciéndolas 
айп más divertidas. Finalmente crearás un auténtico 
juego para móviles llamado «Alimenta a Winston». 


En la página web www.thewecan.zone encontrarás 
los elementos que he creado para desarrollar estos 
proyectos. 


Aunque App Inventor cuenta con una versión en 
espanol, hoy por hoy algunas instrucciones 
secundarias todavía no se han traducido. Si 
necesitas ayuda, consulta a un adulto. 


Si estás leyendo esto en formato electrónico, puedes 
hacer clic en cualquier dirección web que aparezca 
en el texto, como www.dummies.es, para visitar las 
páginas web. 


ACERCA DE TI 


Todo el mundo ha de comenzar por algün lado, ¿no? 
Yo tuve que comenzar a escribir este libro dando por 
sentado que puedes hacer lo siguiente con 
comodidad: 


e Escribir en un ordenador y usar un ratón o un 
dispositivo móvil. Windows o Mac: ambos sistemas irán 
bien. Este libro muestra ejemplos en un Mac y en una 
tableta con Android. 


e Seguir instrucciones. La programación es una tarea 
muy precisa. Es muy importante que sepas seguir 
instrucciones meticulosamente, y que compares las 
imágenes del libro con las que tú mismo crees. 


ACERCA DE LOS ICONOS 


A medida que leas los diferentes proyectos del libro 
verás algunos iconos. Significan cosas diferentes: 
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¡Cuidado! | El icono | Advertencia acompaña 
información | importante que puede ahorrarte 
problemas que se les presentan a veces a los 
creadores profesionales. 





Ф 
< 

G 

VERDA 


El icono Recuerda acompaña ideas que deberías 
tener en cuenta. 





El ¡icono Consejo te ofrece consejos y atajos para 
que crear sea más fácil. 


PROYECTO 1 
Herramientas básicas para 


apps 





Screen! 


Hacer sonido de coche 


Grabar | | Reproducir | Detener 
Lem) u J 





En este proyecto aprenderás a crear una 
cuenta en App Inventor y hacer tu primera 
aplicación de móvil. También aprenderás todas 
las herramientas básicas que usarás para crear 
apps: herramientas como botones, texto y pantallas 
mültiples. 


EL SOFTWARE: APP INVENTOR 


Hay muchas maneras de crear aplicaciones para 
móvil. En este libro crearás aplicaciones para 
teléfonos con Android. 
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Para el funcionamiento de muchos móviles, Google 
creó un programa llamado sistema operativo 
Android. Lo mejor es que Android funciona en 
muchos tipos diferentes de móviles, como Nexus, 
Samsung Galaxy o Google Pixel. Todas las 
aplicaciones que construyas con este libro podrán 
instalarse en teléfonos Android. 


Para construir apps para móviles Android puede 
usarse toda una gama de software y de lenguajes de 
programación diferentes. Tú usarás App Inventor, 
creado por el MIT (Instituto de Tecnología de 
Massachusetts). App Inventor es un lenguaje por 
bloques, lo que facilita y hace que sea más rápido 
construir aplicaciones para móvil. 


Comienza con App Inventor 

Para comenzar con App Inventor, pide a tus padres 
que te acompanen frente al ordenador y sigue estos 
pasos: 


1. Ve a appinventor.mit.edu. 
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Anyone Can Build Apps That Impact the World 
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in Educational 
Mobile Computing 


Introducing 
App Building Guides! 


Check out our second App Building 
Guide developed by MIT App Inventor 
and Youth Radio. 





| MOOC Begins: Mar 19, 2018 
C MIT... | 
> ' http;//bit.ly/MMT2018 


.  Enroll іп МООС Now! 





Start today with the Translation App 
Guide. 
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2. Haz clic en el botón Create Apps. 


3. Ingresa con tu cuenta de Google, o pide a tus 


padres que ingresen con su cuenta de Google. 


. Escoge Permitir para que App Inventor pueda usar 
tu cuenta (o la cuenta de tus padres) de Google. 


. Léete bien las condiciones de servicio con tus 
padres y escoge «Estoy de acuerdo con los 
Términos de Servicio». 


. Decide si quieres tomar parte en una encuesta. 


No es obligatorio participar en la encuesta para construir 
apps para móvil. 


. Escoge una opción para usar tu dispositivo 
Android o el emulador Android. 


Los ejemplos de este libro usan el emulador de Android. 


10. 


Continue with setup - Choose the connection instructions you were following: 


Setup Emulator <-OR-> Connect with USB 
E= === === 





. Sigue las instrucciones para preparar el emulador 


de Android. 


Puedes hallar las instrucciones en inglés aquí: 
http://appinventor.mit.edu/explore/ai2/setup- 
emulator. 
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Pregunta siempre a tus padres antes de instalar 
cualquier software o acceder a cualquier página web. 


. Cuando ya hayas instalado el software App 


Inventor, haz clic en el botón Setup Emulator. 


Luego sigue las instrucciones para establecer tu 
emulador. 
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Puede que necesites ayuda de tus padres para instalar el 
emulador. Puedes necesitar acceso de administrador a tu 
ordenador, lo que significa дие tus padres 
probablemente tengan que introducir su contraseña. 


Regresa a App Inventor y haz clic en Continuar. 


Puedes escoger que esta ventana no aparezca 
nuevamente marcando Іа casilla junto al botón 
Continuar. 


11. ¡Felicidades! Has completado el registro en App 
Inventor. 








| Bienvenido a App Inventor 2! 


Aún no tienes ningún proyecto en App Inventor 2. 

A Para aprender a utilizar App Inventor haz clic en el 
“+ enlace Guia que puedes ver en la parte superior 
== derecha de la ventana, o crea tu primer proyecto, 


haciendo clic en el boton "Nuevo" de la parte 
M IT superior izquierda de la ventana. 
APP INVENTOR 


¡Feliz creación! 





Comienza tu primera арр рага 


móviles Android 
Ahora que tienes el emulador instalado, puedes 


empezar a crear tu primera app para móviles 
Android. 


1. Ve a ai2.appinventor.mit.edu. 


2. Haz clic en el botón Comenzar un proyecto nuevo, 
en la esquina superior izquierda de la ventana. 





ea = M І Т Proyectos v Conectar v 3enerar 
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Proyectos 


Nombre Fecha de creación 


3. Pon un nombre a tu proyecto, como 
«MiPrimeraAplicación», y haz clic en Aceptar. 


Crear un nuevo proyecto de App Inventor 


Nombre del 
proyecto: 


MiPrimeraÁáplicacion 


Cancelar Aceptar 





Ahora deberías ver la pantalla de desarrollo de la app. 
También puedes cambiar el idioma del programa. 
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Arimacióna ls brirPantalla 


Conecta tu emulador de Android 

Antes de comenzar a crear tu aplicación para 
móviles Android, asegúrate de que puedes conectar 
tu emulador. 


1. Abre el menú Conectar y escoge Emulador. 


\ ripae Conectar v venerar v Ayuda v Mis prove 
APP INVENTOR s proye 
1 : - Al Companion 
PrimeraAplicacionn Screen! v | Ai 
Emulador 
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Interfaz de usuario Reiniciar conexión 
nponentes ocultos 


Reiniciar completamente Е 
О Botón al tamaña 


£ CasillaDeVerificación 
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Una ventana emergente te avisa de que el emulador se 
está iniciando, y en tu pantalla comienza a cargarse un 
teléfono virtual. 
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No pulses ningún botón de tu teléfono virtual hasta que 
aparezca la pantalla final. 


. En tu navegador de Internet, App Inventor te 
pregunta si quieres actualizar tu aplicación en tu 
teléfono virtual. Haz clic en OK. 


Companion Version Check 


Your Companion App is out of date. Click "ОК" to start the update. 
Watch your emulator's screen because you will be asked to 
approve the update. 


OK Not Now 





3. Autoriza la instalación de la aplicación en tu 
teléfono virtual. 


өө 5554:«build» eo 5554:«build» eo 5554:«build» ге е 5554:«build» 


maine 9:23 am anm) e 9:23 лм man) e 9:23 лм | mane 9:23 u 
” r x r , 
PAR MIT AI2 Companion an MIT AI2 Companion dn MIT AI2 Companion 
Do you want to install this 
application? (O) Replace application 
The application you are 
installing will replace another 
application. 


All previous user data will be 
saved. 





@ Show all 





Cuando la aplicación se haya actualizado, podrás abrirla 
haciendo clic en la app del MIT Al2 Companion. No 
mostrará nada aún, puesto que no has comenzado a 
construir la aplicación. 
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Si alguna vez te pierdes еп tu teléfono virtual, haz clic en 
el botón Casa y luego en la aplicación MIT Al2 
Companion, y tu aplicación se abrirá. 


iFelicidades! Ya tienes todo el software preparado. 
Ahora puedes comenzar a programar tu primera 
aplicación para móvil. 


PROGRAMAR EN APP INVENTOR 

Si no lo has hecho antes, asegurate de volver al 
principio de este proyecto para preparar tu entorno 
de programación Applnventor y tu emulador de 
Android (el tepléfono virtual de tu ordenador). 





Ahora tienes el entorno preparado. Deberías tener 
un emulador de Android abierto como este. 


Ahora añadirás algunos componentes a tu 
aplicación. 


Anade un botón con sonido 


1. Desde la sección /nterfaz de usuario, en la 
columna Paleta, haz clic en Botón y arrástralo a tu 
visualizador de aplicación. 








Paleta Visor 


Interfaz de usuario ' Mostrar en el Visor los componentes ocultos 





Marca para previsuaiza al Па ) de la Tab 






CasillaDeVerificación 


Texto para Botón1 


Е 


SelectorDeFecha 


Imagen 


k 


Etiqueta 


SelectorDeLista 


VisorDeLista 


А Notificador 


2. En la columna Componentes, asegürate de que 
Botón1 está seleccionado. 


P = 
El Screen] 


— Botón! 


3. En la columna Propiedades, cambia el texto de 
Botónl a «Hacer sonido». 


Propiedades 
Botón] 
ColorDeFondo 
E Por defecto 


Habilitado 
[v| 


Megrita 
Cursiva 


Tamano de letra 


14.0 
TipoDeLetra 
por defecto * 
Alto 


Automatico... 


Ancho 


Autornatico... 


Imagen 


NINGUNO... 


Forma 


por defecto r 


MostrarPulsación 
[v| 


Texto 
Hacer Sonico 


4. Desde la sección Medios, en la columna Paleta, 
haz clic en Sonido y arrástralo a tu visualizador 
de aplicación. 


Paleta Visor 


Interfaz de usuario 









Disposición 


Medios 


dni Grabador 


a El eprodu ctorDeVv den 
Y  TraductorYandes 
Dibujo y animacion 
Maps 

Sensores 


Social 


5. Descarga el archivo de sonido «Car.wav» de 


www .thewecan.zone/mobile-apps que encontrarás 
en CAR SOUNDS. 


6. En la columna Componentes, asegúrate de que 
Sonido está seleccionado, y en la columna 
Propiedades, busca Origen y haz clic en él. 


Componentes Propiedades 
T Screen] Sonido] 
2 Botón IntervaloMinimo 
« Sonido] 
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Subir archivo... 


Cancelar Aceptar 


7. Haz clic en el botón Subir archivo y, mediante la 
ventana emergente, busca el archivo que te 
bajaste en el paso 5. 


Subir archivo 


| Examinar ... | Car.wav 


Cancelar Aceptar 





Tu visualizador debería verse así: 


| Mostrar en el Visor los componentes ocultos 





Componentes no visibles 


T 
Sonido] 


8. Abre tu emulador de app; ahora deberías ver el 
botón que has añadido. 





9. Regresa a tu navegador y haz clic en el botón 
Bloques. 


Mis proyectos Gallery Сша Informar de un problema Español + gmaweyland 73g gmail.com = 





10. En la columna Bloques, haz clic en Botón1 y 
arrastra un bloque CUANDO BOTON 1.CLIC a tu 


visualizador. 


Bloques 





& Integrados 
E contro! 
ШЇ саса 
Bl temáticas 
BL reo 
BI istas 
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Ml variables 
Bl procedimientos 
& Screen] 
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PerderFoco 


11. En la columna Bloques, haz clic en Sonidol y 
arrastra un bloque LLAMAR SONIDO1.REPRODUCIR 
a tu visualizador. Colócalo dentro del bloque 
CUANDO BOTÓN 1.CLIC . 
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iAcabas de programar el botón que creaste para que 
reproduzca el sonido del coche cuando se pulse! 





Í Botón1 > [ 
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12. jAbre el emulador de aplicación y haz clic en el 
botón. ¡Deberías oír el sonido de un coche! 


Renombra tus componentes 

Antes de añadir nada más a tu aplicación, tienes 
que renombrar tus componentes. «Botónl» y 
«Sonidol» funcionan bien de momento, porque solo 
tienes un botón y un sonido. Pero en la próxima 
sección añadirás tres botones y un sonido más, y 
querrás poder identificar para qué botón y para qué 
sonido estás programando. 


1. En tu navegador, haz clic en el botón Diseñador. 





2. En la columna Componentes, haz clic en Botón1 у 
en el botón Cambiar nombre. 


Componentes 


Screen] 


w Sonido 


Cambiar nombre Í Borrar 


3. Cambia el nombre del botón a «BotónCoche». 


Renombrar componente 


Mombre anterior: 


Nuevo nombre: 


Cancelar Aceptar 





4. En la columna Propiedades, cambia el texto del 
botón a «Hacer sonido de coche». 


Propiedades 
BotonCoche 
ColorDeFondo 
id Por defecto 
Habilitado 
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5. En la columna Componentes, selecciona Sonidol. 
Haz clic en el botón Cambiar nombre y ponle el de 
«SonidoCoche». 


Renombrar componente 





Nombre anterior: 


Nuevo nombre: 


Cancelar Aceptar 


6. Ahora tu sección Componentes debería mostrar 
los nuevos nombres. 


zi Screen] 


© BotonCache 


«$ Sonidocoche 


7. Para asegurarte de que tu programa está 
diciendo a «BotónCoche» que reproduzca 
«SonidoCoche» cuando se pulse (antes decía a 
«Botón» que reprodujera «Sonido», pero esos 
términos ya no existen), haz clic en el botón 
Bloques. 


€ Eua Sonidocoche + Midis өн 
. жащ 





Anade un reproductor de musica 

Ahora que ya sabes cómo añadir botones que 
reproducen sonidos, puedes crear un sencillo 
reproductor musical. 


1. Desde la columna Paleta, arrastra un 
DisposiciónHorizontal a tu visualizador. 





2. A continuación, renombra el DisposiciónHorizontal 
como «ReproductorMusica». 


3. Anade tres botones a tu diseno de 
«ReproductorMúsica». 


| | ү 
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4. Nombra los tres botones como «Grabar», 
«Reproducir» y «Detener». 


Componentes 


pa Screen] 
Е BotonCoche 
= 7 ReproductorMusica 
Grabar 
E: Reproducir 
Detener 


< Sonidocoche 


5. Cambia el texto de los tres botones a «Grabar», 
«Reproducir» y «Detener». 


Visor 


[E Mostrar en el Visor los componentes ocultos 


Marcar para previsualizar al tamaño de la tablet 


Hacer sonido de coche 


Grabar Reproducir 
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Asegürate de que el texto del botón Reproducir es 
«Reproducir». Si el texto del botón Detener fuera 
«Reproducir»... ¡sería muy confuso! 


6. Anade un nuevo sonido a tu visualizador. 


Paleta Visor 
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7. Renómbralo como «Grabación». 


Componentes 


= Screen] 


2 BotonCoche 

m ReproductorMusica 
ШЕ Grabar 
Reproducir 
Е Detener 

=! Sonidacoche 
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8. Desde la sección Medios de la columna Paleta, 
arrastra a tu visualizador un GrabadorDeSonidos. 


Paleta Visor 


Interfaz de usuario 
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9. Renombra GrabadorDeSonidos1 como 
«MiGrabador». 


10. Haz clic en el botón Bloques para obtener el 
visualizador de programación de tu app. 


11. En la columna Bloques, selecciona Grabar. 
Arrastra un bloque CUANDO GRABAR.PRESIONAR a 
tu visualizador. 
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12. En la columna Bloques, selecciona MiGrabador y 
arrastra LLAMAR MIGRABADORIINICIAR al bloque 
CUANDO GRABAR.PRESIONAR. 
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13. En la columna Bloques, selecciona Grabar y 
arrastra CUANDO GRABAR.PRESIONAR a tu 
visualizador. 
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14. En la columna Bloques, selecciona MiGrabador y 
arrastra un bloque LLAMAR 
MIGRABADOR.DETENER dentro del bloque 
CUANDO GRABAR.PRESIONAR. 
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ZZ Detener Ld 

S" Sonidocoche Ld 
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ie Cualquier componente + x 
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== 


Cambiar nombre || Borrar 


15. Selecciona MiGrabador y arrastra CUANDO 
MIGRABADOR.DESPUESDESONIDOGRABADO a tu 
visualizador. 


Bloques | Visor 





eund Grabar > Шаси 
ized от Mi Grabador = EINE 
Yep 


ei Logica 





Bl маҥтё&їсәз 

Eeto 

В! itas =” 
E colores 

Bl yariables 








Bl procedimientos 
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Е Detener 


S Sonmidecoche 
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€) Cualquier componente т 


4 Ш F 





Mostrar avisns 


Cambiar nombre | Borrar 


16. Selecciona Grabación y arrastra PONER 
GRABACION.ORIGEN dentro del bloque CUANDO 
MIGRABADOR.DESPUESDESONIDOGRABADO. 


=k. rr aro ii gre 
ides cuando üolenCoche - Cie 
ШмактНсаз l 
H ac BNI Sonidocoche * Bitur reg 
B Texto | 
Bl, istas т 
BB] colores 
B variables 
Bl procedimientos 


E Logica = — E : 
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iet s EIE. MiGrabad 
чы. 
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zi Screen] 
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В BatenCache i 
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Ша Grabar 
Е Reproducir 


D Detener 





S! Sondocoche 





e LMicrabador 





© Cualquier componente = t 
EIU MEET ^13 Ez 

4 | z 
s! Mostrar avises | 


Cambiar nombre — Borras 


17. En la sección Integrados de la columna Bloques, 
selecciona Variables y arrastra un bloque TOMAR 
a tu visualizador, conectándolo con tu bloque 
PONER GRABACIÓN.ORIGEN. 


Bloques Vizor 














+ 


S Integrados 


ÉEIBoloncode * Meis 


Же Grabar * Bici 


gBjecubar | Hamar ЕТЕТ 
TN AE RII 





Bl conira ОТЕ NM FIF Sonidocoche + Mola ки 
Bl ooa 
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E Texto 
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Detener 
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Ш er £s ü e 3 


=т= > 


Cambesr nombre Bonar 


18. Haz clic en el menú desplegable de tu bloque 
TOMAR y selecciona Sonido. 


+711 MiGrabador = Ж еә: а Энее ЕЕ, 





ЗСТ Grabación ~ B Origen ЗП 017 0 sonido = 
= 


19. En la columna Bloques, selecciona Reproducir y 
arrastra un bloque CUANDO REPRODUCIR.CLIC a 
tu visualizador. 


E n 5 : - j 
ntegrado BotonCoc c MEUM Grabar ~ Baron 
[Bl ^nntroi docoche + Malai isa Тө ане SETS Місгарадог + 
Bl: 5аса 
Miustemitcas Ici 
Eeri ejecutar @ | Т Grabar ~ ы ЕП 
ШЇ ECT ! ! ens aut MiGrabador - Г 
š ащ 
Bl colores 
В аше 


В ртпгейүтїггїпє 
= Tr Ha Misrabador = Mea A Тан e aTa a 
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Та ШЕУ 7 


ES Grabar 
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M Ar рыл ^o @2 
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Cambier nombre Borrar 


20. Selecciona Grabación y arrastra un bloque 
LLAMAR GRABACION.REPRODUCIR a tu bloque 
CUANDO REPRODUCIR.CLIC. 


Bloques. Visor 


E Logica 


ТИ Grabar ° Blei 





ab. 
Bl магегпаїсав 
El ejeculal ТЕШЕ MIGrabador = ье 
Texto - = - 
B. stas : 
E cuando E A 3m 
Colores | ШКЕ а Grabar- Basi: 
: ejecutar - 
BI vanskles ejecutar Hamar Detener 
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Bl procedimientos | 
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Sereen] [Б MiGrabador = ME еа е E s а 
Z3 BatenDache РА 


gm Reproductordusica 





ejecutar — poner Oñigen + из 0 sonido т | 
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n 
t 


ES Grabar 
Reproducir 


— Detener 
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p Cualquier componente wr 


4 | In k 





Mostrar avisos — 
Cambiar nombre Ботай 


Medios 


21. En la columna Bloques, selecciona Detener y 
arrastra un bloque CUANDO DETENER.CLIC a tu 
visualizador. Luego selecciona Grabación y 
arrastra un bloque LLAMAR GRABACIÓN.DETENER 
a tu bloque CUANDO DETENER.CLIC. 





Bloques Visor 
шаппа 
sz - 
an = SE rua Grabar - Bises s 
Bl магепыаттсав | 
ni SITUE Sonidococh Lir ME Eni 8 Miorabadoi Iniciar 
E Teto "emn ' iiim ы ; uu 
E Lisias 
Bl coles ; EE Grabar? Bard 
Bl varsbies "Ter E tuae MiGrabador = BN u 
| ` - — — = — 
Bl Procedimientos s — > 
a — Л pic de т 1 
z: Screen] arig à ic AE Mi rabador = PI eli 
Z3 BainnCarhe mid 
= P ReproductorMuaica | = ТСЕ Г Grabación = ME Origen = Mer сс] sonido = 
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ШЫ Grabar 


Reproducir 
— Detaner 
w Sonidecoche 
B LiiGrabadaor 


ж Cualquier componente = 


не Ао Ez 
* ша! 


Cambiar nombre Bomar 


22. Abre tu emulador de aplicación. Deberías ver los 
botones renombrados y los tres nuevos botones. 


Stop this application 


About this application 
| 


| Settings 








7ENCIN 


"To 
Si tu emulador de aplicaciones no se actualiza 
adecuadamente, retrocede en tu navegador y 
escoge Reiniciar conexión, en e/ menu Conectar. 
Luego abre de nuevo el menu Conectar y escoge 
Emulador para reiniciarlo. 


Proyectos = Conectar + Generar = Ayuda + 


1 AlCompanion 
pu 
| TRER 


Emulador 





o USB 





Reiniciar conexión 


Reiniciar completamente 7707 и 


Prueba tu aplicación de musica 
Ahora que has acabado de construir tu aplicación, 
ipuedes probarla! 


Primero haz clic en el botón Hacer sonido de coche. 
Deberías oír el sonido del coche. 


Luego pulsa y mantén apretado el botón Grabar y 
canta algo ante tu ordenador. Suelta el botón Grabar 
y presiona el botón Reproducir. Deberias oír la 
canción que acabas de cantar. Si pulsas el botón 
Detener mientras escuchas la canción, se detendrá. 


Juega con la aplicación que acabas de hacer y 
muéstrasela a tu familia o tus amigos. 





< 

Programar no siempre es seguir instrucciones y 
hacer solo lo que te digan. También implica ser 
creativo e intentar cosas nuevas. Si tienes una idea, 
ipruébala, incluso si aün no has aprendido cómo 
realizarla! 


PROYECTO 2 
Haz una app sobre ti 


mne 7 





En este proyecto aprenderás a crear una 
aplicación con múltiples pantallas, así como 
muchas de las propiedades más divertidas de 
App Inventor. Primero diseñarás tu app sobre 
papel, luego construirás una aplicación-esqueleto y 
la llenarás de contenido, jy aprenderás todo el 
proceso de creación de apps que usan los 
profesionales! 


DISENA TU APP 

Los creadores profesionales de aplicaciones siempre 
las disenan antes de empezar a construirlas. Tener 
un buen diseno facilita el desarrollo de una buena 
aplicación, pues ya sabes qué quieres construir. 


El diseho de una app también se llama «prototipo de 
papel». Un prototipo es una versión primeriza de 
algo que estás fabricando. Hacer un prototipo te 
permite enseñárselo a otros y que te den nuevas 
ideas, antes de abordar la realización definitiva. Los 
prototipos se usan en muchos otros campos, no solo 
en la informática. Así, por ejemplo, antes de 
construir un puente, un arquitecto puede construir 
un prototipo del puente para asegurarse de que 
soporta el peso de los coches y comprobar que 
resulta tan bello como imaginaba. 


Los prototipos de papel son versiones tempranas de 
la aplicación que tienes pensado construir, pero 
sobre papel. Otros tipos de prototipo pueden ser 
dibujos hechos en el ordenador o incluso mini- 
versiones de tu proyecto completo (como las 
maquetas de los arquitectos). 


Haz tu primer prototipo de papel 

Ahora deberías hacer tu primer prototipo de papel. 
Para empezar, has de preparar el papel para realizar 
el prototipo. Luego puedes rellenar los teléfonos de 
papel con lo que quieres que se vea en tu 
aplicación. Al final decidirás qué hacen los botones 
en la aplicación. 


Crea teléfonos de papel 
Sigue estos pasos para crear teléfonos de papel: 


1. Toma un papel y algo con lo que escribir. Yo uso 
papel cuadriculado y bolígrafos rojo, azul y negro. 


2. Dibuja rectángulos para los esbozos de tu 
aplicación. 


Estos rectángulos serán como tu app. Puedes hacer que 
parezcan un teléfono, como los míos, o dibujar sencillos 
rectángulos. 









9 
5° 
Puede que necesites más de lo que cabe en una hoja de 


papel. Puedes hacer fotocopias de los rectángulos que 
has dibujado o dibujar más. 


3. Imprime teléfonos inteligentes, si quieres. 


Si no quieres dibujar los rectángulos, puedes imprimirlos. 
Ve a www.thewecan.zone/mobile-apps y, en PHONE 
TEMPLATE, descarga la versión en PDF para imprimirla. 





Rellena tus teléfonos de papel 

Sigue estos pasos para decidir qué debería figurar 
en cada pantalla. Cada teléfono de papel debería 
considerarse una pantalla diferente. 














1. Diseña tu página principal. 
Cuando tus usuarios abran la aplicación, la primera 
pantalla que verán será la página principal. Dibuja qué 
van a ver. 





2. Planifica las demás páginas. 


Tras decidir las categorías que quieres en tu aplicación, 
comienza a diseñar cada una de esas pantallas. 














CREA EL ESQUELETO DE TU 
APLICACION 


Acabas de diseñar tu aplicación sobre papel. Ahora 
construye tu diseno con App Inventor. 


Crea una nueva app 
Primero crea tu nueva aplicación. Sigue estos pasos: 


1. Ме a http://ai2.appinventor.mit.edu. 






о 
5° 
A veces, al regresar a App Inventor, te lleva a una 
aplicación que has creado previamente. Si esto ocurre, 
abre el menu Proyectos y escoge Mis proyectos para 
regresar a tu página principal. 


= 
з 


@ міт 
» M 


Proyect 
APP INVENTOR 


)S v Conectar * Generar = Ayuda ~ 


i 
Е 


Mis proyectos 









| Comenzar un proyecto muevo... 


importar proyecto (.aia) desde mi ordenador... E 


Nombre 


Importar proyecto (.aia) desde mi repositorio | de creación 


MiPrimeraAplicacion 2018 15:18:05 
Г] АР Borrar proyecto [ 


Guardar proyecto 


2. Haz clic en el botón Comenzar un proyecto nuevo. 


m MIT r рч гъ umm a кыгы тт pa rm тра 
= Proyectos * Lonectar * -епегаг = Ayuda = 


APP INVENTOR 





Nombre Fecha de creación 


IF MiPrimeraAplicacion 12/4/2018 15:18:05 


3. Ponle un nombre como «AsiSoyYo». 


Crear un nuevo proyecto de App Inventor 


Nombre del 
proyecto: 


Aceptar 





4. iFelicidades! Ya estás preparado para empezar a 
disenar tus pantallas. 





A veces App Inventor se actualiza. Si te sale este 
mensaje, haz clic en Reload. 


Either your session has expired, or App Inventor has been 
upgraded. You will need to "Reload" your session to continue. 


Press the "Reload" Button below. 


Reload 





Crea la página principal 
La primera página que has de crear es la principal. 
Sigue estos pasos: 


1. Arrastra un DisposiciónVerticalconScroll a tu 
pantalla. Lo hallarás en la categoría Disposición 
en la sección Paleta, en el lado izquierdo de tu 
pantalla. 


DisposiciónVerticalconScroll significa que si añades 
demasiados objetos a la pantalla, esta se moverá hacia 
abajo, para que los usuarios puedan verlos todos. 





| AsiSoyYo 





Paleta Visor 
— — ` Mostrar en el Visor los componentes ocultos 
Disposición 

m DisposicionMorizonta 

РӘ HorizontalScroll Arrangement ? 
H3 DisposiciónTabular 


A DisposiciónVertical 


Ú WerticalScrollArrangement 





2. En la sección /nterfaz de usuario, busca Imagen. 
Arrastra un elemento /magen al 
DisposiciónVerticalconScroll. 








Paleta Visor 


Interfaz de usuario irl А АЕ А 
| Mostrar en el Visor los componentes ocultos 


La 


Botón ; Marcar para previsualizar a| tamar 


w^ CasillaDeVerificacion 


FE] SelectorDeFecha 





Etiqueta 
SelectorDeLista 


— po — 2 hn 
= VsorDelista 


3. En la sección Interfaz de usuario, busca Etiqueta. 
Arrastra el elemento Etiqueta al 
DisposiciónVerticalconScroll, bajo la imagen del 
paso 2. 





x ч 2 
Screen] = Añadir ventana 


Paleta Visor 


AsiSoyYo 


Interfaz de usuario 


| ; 
| Mostrar en el Visor los componentes ocultos 


ES Boton | Marcar para previsualizar al tamaño de la tablet 
w^ CasillaDeWenficación 
[|] SelectorDeFecha 

wa Imagen 


' Texto para Etiqueta! | 
u Etiqueta 


SeiectorDeLista 








4. En la sección Disposición, busca 


DisposiciónHorizontal y arrastra uno al 
DisposiciónVerticalconScroll, bajo la etiqueta del 
paso 3. 


AsiSoyYo sminar ventana 





Interfaz de usuario 
[ Mostrar en el Visor los componentes ocultos 


Disposición Marcar рага previsualizar al tamano ge la table! 


МӘ DisposiciónHorizontal 





HorizontalScrollArrangement + 
H3 DisposiciónTabular 
Texto para Etiqueta 


J DisposiciónVertical 


Ú VerticalScrollArrangement 


Medios 





Dibujo y animacion 


5. Luego arrastra un segundo DisposiciónHorizontal 


al DisposiciónVerticalconScroll. 


Deberías colocarlo bajo el DisposiciónHorizontal del paso 
4. 





AsiSoyYo Screen] + Í Añadir ventana n ninar ventana 
Paleta Visor 
Interfaz de usuario | PT naya i J i 
F Mostrar en el Visor bos componentes ocuitos 
Disposición 


Marcar para previsualizar al tamano de la tablet 


МҸ  DisposiciónHorizontal 





FA HorizontalScrollArrangement ? 
H3 DisposiciónTabular 
Texto para Etiqueta! 


j DisposicionVertical 


j VerticalScrollàrrangement 


Medios 

Dibujo y animación 
Maps 

Sensores 


Social 





6. En la sección Interfaz de usuario, busca Botón y 


arrastra uno al DisposiciónHorizontal del paso 4. 


AsiSoyYo 








Interfaz de usuario 





A  CasillaDeVerrficación 


EJ 


SelectorDeFecha 


wi magen 
A| Etiqueta 
SelectorDeL ista 
= VisorDeLista 


h  NHotificador 


CampoDeContrasena 


| Р 
Mostrar en el Visor los componentes ocultos 


ualizar al tamaño de la tablet 


лагсаг рага previs 


Texto рага Etiqueta 


Texto para Botón1 ] 





7. Arrastra un segundo Botón al 
DisposiciónHorizontal del paso 4. 


Debería quedar a la derecha del Botón del paso 6; para 
ello, déjalo caer sobre él. 





AsiSoyYo 


= = а pm = — 
Erreen] * Añadir ventana 








Paleta Visor 


Interfaz de usuario 


v 


E] 
P 


CasillaDeWerficación 
SelectorDeFecha 
Imagen 

Al Etiqueta 
SelectorDeLista 


VisorDeLista 


А  Notificador 
CampoDeContraseña 

MA  Deslizador 

8. Añade dos botones 
del paso 5. 


Mostrar en el Visor los componentes ocultos 





Marcar para previsualizar al tamaño de la tablet 








más al DisposiciónHorizontal 





| | == 
Texto para Botón3 | Texto para Botón4 





iFelicidades! Has creado el esqueleto de tu página 
principal. 


Antes de pasar a una nueva pantalla, es importante 
nombrar todos los elementos para que sepas qué es 
qué. Para hacerlo, sigue estos pasos: 


1. Para renombrar cada elemento, haz clic en un 
elemento de la columna Componentes y, a 
continuación, en el botón Cambiar nombre. 


Componentes 


Screen] 
= Piver calScrollArrangement] 
uli Imagen] 
` Etiqueta] 
Disposición Horizontal] 
— Boton] 
Е Botón2 
DisposiciónHorizontal2 


Z2 Botón3 


4 T h 


Cambiar nombre A Borrar 


2. Renombra el elemento como te apetezca y haz 
clic en Aceptar. 


3. Haz lo mismo con todos los elementos; tu sección 
Componentes debería verse asi: 


Componentes 

= š 
Screen] 

E VerticalScrollArrangement] 
ull ImagenPerfil 

` ¡Nombre 
DisposiciónHorizontall 
— Aficiones 
# Fotos 

э m DisposicionMorizontal2 


Z2 Sonidos 


— Dibujos 


Por ültimo, has de cambiar las propiedades de cada 
elemento. Sigue estos pasos: 


]. En primer lugar, arregla el 
DisposiciónVerticalconScroll. Selecciona 
DisposiciónVerticalconScroll en la columna 
Componentes, y la columna Propiedades mostrará 
las propiedades para este elemento. Cambia la 
propiedad DispHorizontal a Centro:3. 


Propiedades 
VerticalScrollArrangement] 


DispHorizontal 


Centro: 3 v 


Izquierda: 1 





2. Cambia el Ancho a Ajustar al contenedor. 


Esto significa que este elemento llenará la pantalla. 


Ancho 


| Automático 
Ө Ajustar al contenedor 
| pixels 


percent 





Cancelar Aceptar 


3. Selecciona /magenPerfil y, en la columna 
Propiedades, escoge Foto y Subir archivo. 


Foto 


Subir archivo... 





Cancelar Aceptar 


4. Haz clic en Examinar y escoge una imagen que 
quieras usar para tu perfil. 


No se ha seleccionado ningún archivo. 


Cancelar Aceptar 





5. Haz clic en Aceptar. 





ENCIA 


I 
“Сш 


¡La Imagen puede ser demasiado grande! 





6. Cambia las propiedades A/to y Ancho a 50 píxeles, 
para que la imagen quepa en la pantalla. 


Alto 
Automático 


Ajustar al contenedor 
pixels 


percent 


Cancelar Aceptar 





7. Cambia las propiedades de Nombre: selecciona 
Nombre en la columna Componentes. Cambia el 
«Texto» por tu nombre. 


Componentes Propiedades 
Screen] Nombre 
J vert calScrollArrangement] ^olorDeFondo 
ull ImagenPerfil [] Ninguno 


DisposicionHorizontall 


22 Aficiones 
= Fot 
E Tamaño de letra 
Dispos cionHorizontal2 amano de letra 
— Sonidos 
= Dibujos TipoDeLetra 
or detecto 
HTMLFormat 
HasMargins 
V 
Alto 
4 І 
) ncho 


Cambiar nombre Borrar A gomez 


Medios 





8. Cambia las propiedades de Aficiones. Cambia el 
«Texto» a «Mis aficiones». Para ello, selecciona 
Aficiones en la columna Componentes y luego 
cambia el «Texto» como hiciste en el paso 7. 


9. Cambia las propiedades de los otros tres botones: 
Fotos, Sonidos y Dibujos. Cambia el «Texto» de 


cada una de ellas por «Mis fotos», «Mis sonidos» y 
«Mis dibujos». 


Visor 


Mis aficiones Mis fotos 





10. Cambia las propiedades de los dos 
DisposiciónHorizontal de modo que ambos tengan 
Centro:3 en DispHorizontal y Ajustar al 
contenedor en Ancho. 


Componentes Prapiedades 
a m Screen] DisposiciónHorizontall 
1 VerticalScrollArrangemen 


ul imagenPerfi 
Hombre 
mm. rd š ' 
= DisposicionHorrzontal 


= Aficiones 





3m DisposicionHorrzontal 2 
== SONIDOS 
Ш Dibujos 
Automático 
© ajustar al contenedor 


pixels 


percent 


Cancelar Aceptar 





¡Enhorabuena! ¡Acabas de planificar tu primera 
aplicación! 


Visor 


Mis aficiones Mis fotos 


Mis sonidos Mis dibujos 





Crea las demás pantallas 

Ahora que has completado tu página principal, 
puedes crear las otras ocho pantallas del mismo 
modo. Aquí tienes las reglas generales para crear 
cada pantalla. Consulta la sección anterior para 
saber cómo añadir cada componente. 


1. Haz clic en el botón Añadir ventana. 


Asi5oyYo 





Paleta Visor 


2. Pon un nombre útil a la pantalla, como 
«Aficiones». 


3. ¡Comienza a construir en ella! 








a en el Visor los componentes ocultos = Aficiones 
Marcar para previsualizar al tamaño de la tablet - Jl pisposiciónvertican 
A Titular. 
3 [fbisposiciónTabular! 
' Bailar 
^ Nadar 
^^ Pasear 
` Cantar 


+ m DisposicionHorizontal] 


Cambiar nombre Borrar 
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A veces, mientras construyes la aplicación definitiva, 
tienes ideas para mejorar el diseno. jDe acuerdo! 
Siempre estás a tiempo de modificar el diserio. Por 
ejemplo, yo decidí que en lugar de incluir una pantalla 
separada para añadir una nueva afición, podía añadirla 
directamente en la pantalla de aficiones. 


A continuación se muestran las tres pantallas que 
diseñé para mi aplicación About Me. 


Componentes 


| | ч гє 
I Mostrar en el Visor los componentes ocultos Fotos 


LIT calScrollArrangement] 
ч? DisposiciónTabular] 
ull Lewis 
ul Clark 
ul Luke 
ull Pnncess 


ш". SelectorDelmagen! 


Anadir imagen 


4 Hi k 


Cambiar nombre Borrar 


Medios 





zimagenzperfil jpg 


_ Mostrar en el Visor los componentes ocultos 


Los sonidos de Sarah 


Sonido campana 


Sonido telefono 





SonidoCampana ¡Sonido Telefono! 





== 
Sonidos 


Ў verticalscro lArrangement] 
ZZ Sonidos, Sarah 
ZZ Campana 


Е Telefono 


d | dI h 
Cambiar nombre Borrar 
Medios 
nmagenzperfil jpg 


gato01 jpg 
gato02 jpeg 


Dibujos 


| Mostrar en el Visor los componentes ocultos 


Buen calScrollArrangement] 
' Misdibujos 
DisposicionHorrzontal1 
A LienzoDibujos 


— G Jar 0 ard b uj П 


# n j 


Cambiar nombre Borrar 


Medios 





zimagenzperfil jpg 


Ahora deberías tener un total de cinco pantallas: 





Paleta 
Š A | Aficiones | 
Inler [az de изии 

Fotos 
Е Eoton ' Sonidos 
w^ CasillaDeVerficacion ? Dibujos 


PROGRAMA TU APLICACION 
¡Es hora de añadir programación a tu aplicación! 
Ahora viene lo divertido. Primero programarás todos 
los botones para poder ver todas las pantallas. 
Luego, en el siguiente proyecto, programarás 
nuevos elementos para cada pantalla. 


Programa los botones 
Para entrar en los bloques de programación, haz clic 
en el botón Bloques. Luego sigue estos pasos: 





EN CIN 


"To 
Asegúrate de que te encuentras en la primera 
pantalla (Screen1) a fin de programar primero los 
botones de la página principal. Así podrás llegar a 
las demás pantallas cuando pruebes tu aplicación. 


1. Selecciona Aficiones, en la columna Bloques, y 
arrastra un bloque CUANDO AFICIONES.CLIC al 
visualizador. 











г rice -5 
Bloques 
ШШ Matematicas E 
BL reo 
| Listas 
E colores — 
2 ObteneriFoco 
Bl variables | 
lll procedimientos 
= Screen] = "us 
«Ella Aficiones ~ A+ ус» 
C |AverticalScrollArra : ES l = 
J verticals rollArrange ejecutar 
ull imagenPerfil = 
Nombre =: «їе Aficiones ~ Mas 
= PL. e "Б 
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— Aficior Ms 
Æ Fotos fi | Presionar 
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ZZ Sonidos eene | — 
Z Dibujos 7-0%" Aficiones * 0157 
(€ Cualquier componente - ejecutar 
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2. Selecciona Control en la columna Bloques y 
arrastra un bloque ABRIR OTRA PANTALLA 
NOMBRE DE LA PANTALLA al bloque que has 
anadido en el paso 1. 


Bloques 
B Integrados T 
Bil contro! 
E Logica 
Bil Matemáticas 
B eco 
E Listas 
Colores 
Ml variables 
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abre otra pantalla con un valor inicial Nombre de la pantalla B 
[B] Procedimientos SEMEN A 
Valor inicial 


© ^ Screen 


& [S verticalScrollArange tomar el valor inicial | 


all ImaqenPerfil 





cemar pantalla 
A ¡Nombre 





= РА DisposiciónHonzont: cerrar la pantalla con un valor resultado 


— Aficiones 
cerrar la aplicación 


== Fotos 


= Mn; T 22 
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Cambiar nombre Borrar cerrar pantalla con texto texto 


3. Selecciona Texto en la columna Bloques y arrastra 
un bloque de texto vacío al extremo del bloque 
del paso 2. 





& Integrados ^ 


Bl contro! 1 valor inicial Nombre de la pantalla 










B саса | | Valor inicial 


BR ase máticas 





[Bl Listas 
[Bl colores 
[Bl variables 


[ll Procedimientos 
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=) Screen] 


e 8 VerticalScrollArrange 





ull ImagenPerfil 
^ Nombre . comienzo en el texto 
& PbisposiciónHorizont: cadena 
Z3 Aficiones 
Z3 Fotos 
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Cambiar nombre — Borrar 





aleta Aficiones * Ber 





4. Abre el menú Conectar y escoge Emulador. Deja 
que el emulador se inicie en tu ordenador. 
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3 
A veces el emulador no funciona a la primera. Si es así, 
ciérralo y vuelve a intentarlo. 


En cuanto se cargue tu aplicación, verás la página 
principal. 





5. Haz clic en Aficiones: debería abrirse tu página de 
aficiones. 


Las aficiones de Sarah 





Haz cambios simples 

A la hora de probar el botón Aficiones, te habrás 
dado cuenta de que no tienes modo de regresar a tu 
página principal. ¡No te preocupes! Puedes añadir 
un botón Página principal a cada página. 


Visor Componentes 


=> 
Mostrar en el Visor los componentes ocultos Aficiones 
Ж Dispo sicion Vertical l 
“шаг 
= - Кт... v 
DisposicionTabularl 
V Bailar 


‘Nadar 


Pasear 


Pasear Cantar 
EUIS "¡Cantar 
arus = | 
Tm ы DisposiciónHorizontal 
+ _ > 
| Pág. Principal |  —PagPrincipal 


Cambiar nombre Borrar 


gatol уро 





ETE Ini PagPri 


ejecutar abrir otra pantalla Nombre de la pantalla 





Programa todos tus botones 

Ahora puedes programar todos tus botones. No 
olvides hacer una prueba cada vez que hagas un 
cambio en la programación. 


En el próximo proyecto aprenderás a añadir nuevas 
características, como la de poder dibujar sobre 


fotografías. 


PROYECTO 3 
Crea un editor de imagen 











Los dibujos de Sarah 
"к E. a, š 


"ч 





Volver a Pág. Principal 





En este proyecto aprenderás а añadir 
imágenes a tu aplicación y a editarlas 
dibujando sobre ellas. Primero aprenderás cómo 
añadir más imágenes a tu aplicación; luego, a 
dibujar sobre un lienzo y, finalmente, a dibujar sobre 
tus propias imágenes. 


PREPARA TU APP DE EDICIÓN DE 
IMAGEN 


Tienes dos opciones para tu editor de imagen: 
puedes continuar con la app sobre ti que creaste en 
el Proyecto 2 o comenzar una nueva aplicación. 





Comenzar con una nueva app 

Si decides crear una aplicación que solo sea un 
editor de imágenes, y no continuar con tu app del 
Proyecto 2, sigue estos pasos: 


1. Ve a appinventor.mit.edu y accede. Haz clic en 
Proyectos > Comenzar un nuevo proyecto. Llámalo 
«FotoEditor». 


2. Añade un DisposiciónHorizontal de la categoría 
Disposición, y coloca tres botones de la categoría 
Interfaz de usuario dentro del 
DisposiciónHorizontal. 


Visor Componentes 
pi screen і 
E 
= DisposicionFiorizontall 
— Botón3 
= Boton? 


== Boton] 





Texto para Boton3 | Texto para Boton2 Texto p 





3. Selecciona DisposiciónHorizontal en Componentes 
y cambia la propiedad DispHorizontal a Centro:3 y 
la propiedad Ancho a Ajustar al contenedor. 


Componentes Propiedades 





= Screen] DisposiciónHorizontal | 
DisposicionMorizontal DispHorizontal 
ШО Boton3 Centro: 3 + 
«x Boton? DispVertica 
2 Botón] Arriba: 1 + 


ДП 
wO E; U nc U 


[ү Por defecto 





4. Busca tres fotos que hayas guardado en tu 
ordenador, o bien descarga las que podrás 
encontrar en www. thewecan.zone/mobile-apps, 
dentro de SAMPLE PICTURES. 


5. Prepara los componentes de tus botones para que 
tengan una imagen y dales el nombre adecuado. 
Asegúrate de quitar el texto de los botones, para 
que no quede texto sobre la imagen. 


cma] rbal 

P. | 
ШНЕК la 
menn В l 
Dan Mbs kia 
— mnl ¡El 





6. Cambia el A/to y el Ancho de todas las imágenes a 
100 píxeles. 





visar Componemica Propiedades 
Г] 
rim Baigb 
L Mosir t li Screen 
E : 
Et. DrenaeiciónMarizantall CalmüeFanda 
ilem B Por detecto 
I Arcane Habi dodo 
n FA 
— Basho] 
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F] 
amara de letra 
TipoDleLetra 
por defecto = 
nori Bon Батай 
er Forma 
a pur defecti 
Dog JPG 
007 MontrarPulzación 


7. En la columna Paleta, busca Dibujo y animación y, 
desde allí, arrastra un Lienzo hasta situarlo bajo 
tus imágenes. 


Interfaz de usuario E} me 

Mostrar en el Visar los componentes ocultas 
Disposición Marcar para previsualizar al tamaño de la tablet 
Medios 


Dibujo y animación 


3 Pelota 





=  Sprntelmagen 


Maps 

Sensores 

Social 

Almacenamiento 
Conectividad 

LEGOS MINDSTORMS€ 
Experimental 


Extension 





8. Cambia el Ancho y el Alto de tu Lienzo a Ajustar al 
contenedor. 




















Visor Componentes Propiedades 
zm E 3 
тера = 5 Lienzo1 
Flhostrar enel Visor los componentes ocultos Screen] 
Marcar para previsualizar al tamaño de la tablet : DisposiciónHorizontall ColorDeFondo 
Perro [] Por defecto 
LS Arcoiris ImagenDeFondo 
ZEE . Hinguna... 
Beisbol 
ү La Lienzo] Tamaño de letra 
чш 
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ColorDePintura 
In Por defecto 
PosiciónDelTexto 
centro: 1 + 
Visible 
Cambiar nombre Borrar Iv 
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Dog.JPG 


¡Enhorabuena! Ya puedes probar y programar tu 
aplicación. Puedes saltarte las dos secciones 
sigulentes, «Comenzar con una app About Me 
preparada» y «Comenzar con tu app sobre ti», e Ir 
directamente a «Prueba tu app». 


Comenzar con una app About Me 


preparada 

Si no creaste la app sobre ti del Proyecto 2, y no 
querías comenzar con una aplicación de edición de 
imagen independiente como la descrita en la 
sección anterior («Comenzar con una nueva app»), 
¡nas venido al lugar correcto! 


Puedes utilizar la aplicación About Me que hice 
cuando escribía el Proyecto 2. 


1. Ve a www. thewecan.zone/mobile-apps y bájate el 
archivo «AboutMe.aia» que encontrarás en ABOUT 
ME. 


2. Ve a appinventor.mit.edu y haz clic en el botón 
Proyectos; a continuación, selecciona /mportar 
proyecto (.aia) desde Mi ordenador. 







ss MIT i Proyectos * Conectar = Generar + Ayuda + 
APP INVENTOR š ? 


Comenzar un proyecto nuevo- | Bararpiy MSP 


Comenzar un proyecto nuevo. 





тте importar proyecto (.aia) desde mi repositorio реса 
[Г] FotoEditor ir amem {2018 16:21:45 
[Г] AsiSoyYo {2018 16:37:27 
E 3uardar proyect 
[Г] MiPrimeraAplicacion | /2018 15:18:05 
3uardar proyecto coma 


Exportar todos los proyectos 


Importar keystore 


3. Haz clic en Examinar, busca el archivo 
«AboutMe.aia» que te bajaste en el paso 1 y haz 
clic en OK. 


< = = m s. *. п a A Busca: 
Atrás Visualización Organizar Acción Compartir Editar etiquetas Buscar 


Favoritos 
Todos mis archivos 
À iCloud Drive 
¿2 Aplicaciones 
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e Descargas | 
EN Documentos ACT | O N S 
ГТ] Creative Cloud Files AboutMe.aia | 
@ AirDrop | 
Dispositivos Nombre Tamaño Clase ^ Fecha de modificación 
@ Dieco remote al Abouthie aia 1.3 MB Acción de Adobe Illustrator hoy 12:11 





iDeberías ver mi app About Me! 





AboutMe 
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L. Mostrar en el Visor los componentes ocultos 
ES Botón 

wl  CasillaDeVeriicacion 
[Ж] SelectorDeFecha 
БШ Imagen | 
Sarah Guthals 


= | |  MyHebbes Мураша Hobbies My Pictures 
zm VisorDelista 
My Sounds My Drawings 
MÀ Notihcador | 
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Desplegable 


CampoDeTexto 


SelectorDeHora 


ми VisorWeb 


Disposición 
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Db w animira 
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51 ya has creado una app llamada «About Me», en 
inglés, no podrás importar mi app, porque tiene el 
mismo nombre. Esto se soluciona fácilmente: 
cámbiale el nombre a mi app (por ejemplo, 
«SarahAboutMe», o cualquier nombre que se te 
ocurra). 


Ahora que tienes mi aplicación About Me, ya puedes 
seguir las instrucciones que encontrarás en la 
siguiente sección. 


Comenzar con tu app sobre ti 
En esta sección aprenderás cómo añadir un editor 
de imagen a tu app sobre ti. 





AsiSoyYo 
Paleta Aficiones 
Interfaz de usuario 
Fotos 
e зе | Screen] 
w^ CasillaDeVerificación Sonidos 


1. Ve a appinventor.mit.edu y abre tu app sobre ti. 
Luego ve a tu pantalla Dibujos. 


2. En Componentes, cambia el A/to de 
DisposiciónVertical, de DisposiciónHorizontal y de 
LienzoDibujos a Ajustar al contenedor. 


3. Añade un segundo DisposiciónHorizontal sobre el 
DisposiciónHorizontal que contiene tu Lienzo y tu 
botón Guardar. 





Paleta Visor 


Interfaz de usuario 


L Mostrar en el Visor los componentes ocultos 


Disposición 





| Dibujos 





Los dibujos de Sarah 


Jj  VWerticalScrollArrangement 


Medios 


Dibujo y animacion 


b. __ 


Sensores 





Social ^m 





4. Regresa a la sección «Comenzar con una nueva 
app», un poco más arriba, y sigue los pasos 3 a 7. 
Sobre tu Lienzo deberías tener tres imágenes 
para escoger. 


Visor Componentes Propiedades 
Fi Visor | — Dibujos Beisbol 
[ Mostrar en el Visor los componentes ocultos Dibujos 
no d d J verticalScrollArrangementl ColorDeFanda 
t > E E h n En, 1 
` IMisdibujas l Por defecto 
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ibui J Perro [V| 
Los dibujos de Sarah | 
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= Beisbol Ё) 
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= PagPrincipal 
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por defecto = 


Alto 

Ancha 

AN а ЕТТ | 
Cambiar nombre Borrar Bethel ЭРИТ 


; Forma 
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por defecto = 





gato01. pa 


¡Enhorabuena! Ya estás preparado para probar y 
programar tu editor de imagen. 


PRUEBA TU APP 


Antes de comenzar a programar, asegurate de que 
tu aplicación aún funciona. En los Proyectos 1 y 2 
probamos las aplicaciones con el emulador. Este 
proyecto prueba la app con un dispositivo Android. 
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Si no tienes a mano un dispositivo Android, puedes 
utilizar el emulador. Consulta cómo se hace en los 
Proyectos 1 y 2. 


1. Ve a 
http://appinventor.mit.edu/explore/ai2/setup.htm 
l y verás que hay tres opciones para probar tu 
app. Los Proyectos 1 y 2 siguieron la opción 2 
(usando el emulador). Esta vez seguirás la opción 
1: empleando un dispositivo Android y vía Wi-Fi. 


. Option One - RECOMMENDED 
Build apps with an Android device and WiFi Connection (preferred): Instructions 


If you have a computer, an Android device, and a WiFi connection, ihis is the easiest way іо tesi your apps. 


Build your project on Test it in real-time on 
your computer your device 





Option Two Option Three 
Don't have an Android device? Use the No WiFi? Build apps with an Android device 
Emulator. Instructions and USB Cable: Instructions 


If you don't have an Android phone or tablet hancy, you can still Some firewalls within schools and organizations do not allow 
use App Inventor. Have a class of 30 students? Have them the type of WiFi connection required. If WiFi doesn't work for 
work primarily on emulators and share a few devices. you, try USB. 





Build your project on Test it in real-time on 


your саптриїег your computer with Build your project on Test itin real-time on 
the onscreen your computer your device 
emulator 


2. Bájate la app MIT Al2 Companion desde la Play 
Store de Google y sigue las instrucciones de esta 
página: 
http://appinventor.mit.edu/explore/ai2/setup- 
device-wifi.html. 


MIT AI2 Companion 
MIT Center for Mobile Learning 


Educación 





INSTALAR 


Ба Es posible que esta aplicación no esté optimizada para tu dispositivo 


42% Más de 1M H 
17 mil opiniones Descargas PEGI 3 © 


=] rad ва 


МЕТ App Irmentor 2 Companion 
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Your IP Address ts — 192. 168.1.107 
Version: 2.118222x1 
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VERDA 


Pide siempre permiso a tus padres antes de bajar O 
instalar cualquier software. 


3. Asegúrate de que tu dispositivo Android y tu 
ordenador están conectados a la misma red Wi-Fi. 


A LJ (2, Mar 10:50 a Ө 


Wi-Fi: buscando redes... 
Desactivar Wi-Fi 





d m АЕА T em ~ i Z. s” a m + 
Compartir Internet 


Teléfono de Sarah eoooo LTE (m) 


Y CactusGlenAE a Z 





4. Regresa a tu app en 
http://ai2.appinventor.mit.edu/ y haz clic en AI 
Companion. 





©з MIT Proyectos » 


APP INVENTOR 







Ayuda ~ 


AsiSoyYo 





Emulador 
Paleta Visor ] USB 
interfaz de usuario Reiniciar conexión I luostrar ene 
. Botón ` Reiniciar completamente Marcar para 


w^ CasillaDeVerificación , "и 
Dibujos 


5. Abre AI2 Companion en tu dispositivo Android y 
teclea el código que te aparece en la pantalla. 





Launch the MIT AI2 Companion on your device 
and then scan the barcode or type in the code 
to connect for live testing of your app 

Need help finding the Companion App? 


[m] 


Tu código es: 





MIT App! 


type In the 6-character code 
-O[- 
scan the QR code 


connect with code 





scan QR code 


Your IP Address is: 192.168.1.108 
Version: 2.46 





. Haz clic en Connect with Code: itu aplicación 
debería abrirse! 
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Tu código será diferente del que se muestra en este 
libro, y cambiará cada vez que pruebes tu app. 





Cuando pruebes tu app, puedes cambiar la pantalla 
desde tu ordenador: cambia a una pantalla diferente y el 
cambio se efectuará también en tu app. 


Ы Anadir ventana Eliminar ventan 





PROGRAMA TU EDITOR DE IMAGENES 
El resto de este proyecto prosigue con el editor de 
imágenes que has añadido a la aplicación sobre ti. Si 
decidiste crear una nueva app para el editor de 
imágenes, puede que haya algunas pequeñas 
diferencias entre lo que tienes y lo que se ve en el 
libro. Busca los apartados «atención», que te 
servirán de ayuda. 


Prepara una imagen de fondo 
Obviamente, antes de comenzar a editar una foto, 
has de tener una. Esta sección te explica cómo 
conseguir una imagen de fondo para tu L/enzo. 


1. Haz clic en Bloques, situado en la parte superior 
derecha de la pantalla. 
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Deberías estar en la pantalla Dibujos. 


2. En la columna Bloques, haz clic en Perro y 
arrastra el bloque CUANDO PERRO.CLIC a tu área 
de programación. 


Bloques 
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3. Desde Bloques, selecciona LienzoDibujos у 
arrastra un bloque PONER 
LIENZODIBUJOS.IMAGENDEFONDO al bloque del 
paso 2. 
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Nombre del archivo que 
contiene la imagen de 
fondo para el lienzo. 
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4. Desde Bloques, selecciona Perro y conecta un 
bloque PERRO.IMAGEN al bloque del paso 3. 
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5, ¡Enhorabuena! Ahora, cuando hagas clic en el 
botón Perro, la imagen del Lienzo cambiará y 
aparecerá el perro. 


2ТЕ Регго = ө, 


с O LienzoDibujos * MM ImagenDeFondo * Mete 
-— 
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¡Asegúrate de probar tu aplicación en tu dispositivo! 


. Ahora añade el mismo tipo de código para los 
otros dos botones, Arcoíris y Beisbol. 
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¡Asegúrate de probar tu aplicación en tu dispositivo! 








Los dibujos de Sarah 
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Volver a Pág. Principal 


Adapta tu diseño a tu función 

A veces, cuando comienzas a construir tu aplicación, 
te das cuenta de que lo que pensabas que harías y 
lo que realmente has hecho son cosas distintas. 
Esto, sin embargo, no es un problema: ocurre 
constantemente, incluso a los programadores 
profesionales. Lo ünico que has de hacer es tomarte 
el tiempo necesario para que lo que estás 
construyendo fluya correctamente. Por ejemplo, 
fluiría mejor si los usuarios pudieran borrar su dibujo 
y volver a empezar de cero. De esa manera podrían 
hacer un montón de dibujos, y si quieren guardar 
alguno de ellos, pueden hacer una captura de 
pantalla. Los próximos pasos te ensenan cómo 
cambiar el botón Guardar por un botón Borrar. 


1. Puedes adaptar tu app a la nueva función 
cambiando el botón Guardar por un botón Borrar. 
Primero, cambia el nombre del botón. 


Componentes Propiedades 
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zimagenzperfil jpg 


. Luego, en tu programación, anade un bloque 
CUANDO BORRARDIBUJO.CLIC y coloca dentro de 
él un bloque LLAMAR LIENZODIBUJOS.LIMPIAR. 


Dibujos + | Añadir ventana | Eliminar ventana 
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. Después añade una nueva imagen, totalmente 
blanca, a tu pantalla de Dibujos, y deselecciona la 


casilla Visible. 


Puedes conseguir la 


www .thewecan.zone/mobile-apps, 


PICTURES. 
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ZZ PagPrincipal 


imagen blanca en 
dentro de SAMPLE 


Propiedades 


Blanco 


Alto 





AnguloRotación 


00 
EscalarFotoAlTamañoMáximo 
Visible 

[Y | 


. Por último, en tu programación, añade un bloque 
PONER LIENZODIBUJOS.IMAGENDEFONDO у únele 


un bloque BLANCO.FOTO. 


+717" BorrarDibujo * Ko 
TA ЕТТ LienzoDibujos т и, ЕП 





З LienzoDibujos + Ж ColorDeFondo + Ще MM Blanco · JN Foto + 
àw 





N 
Y 


VERDA 


Pon a prueba tu aplicación y asegúrate de que, al pulsar 
en una foto, el Lienzo muestra esa misma foto, y de que 
al hacer clic en el botón Borrar, el Lienzo se queda en 
blanco. 





“ENCIA 


“Сы 


Puede que tengas que cambiar el Alto del LienzoDibujo 
para tener un poco más de espacio. Si es así, regresa a 
Diseñador (arriba a la derecha en tu pantalla) y cámbialo 
a 300 píxeles. 


Dibuja sobre tus fotos 
Finalmente ha llegado el momento de que edites tus 
fotos. Para ello, sigue estos pasos: 


1. Deselecciona la casilla Visible de tu LienzoDibujo 
para tener más espacio mientras diseñas tu 
pantalla. 


2. Ahade un DisposiciónVertical junto al botón 


Borrar. 


e" Dibujos 
a [H verticatScrol lArrangemen 
^ |Misdibujos 

Mo sposiciónHorizontal2 
8 Perro 
A Arcoiris 
Beisbol 

dl Blanco 


PP pisposiciónHorizontall 





ua BorrarDibujo 


ZZ PagPrincipal 


4 11 j 


Cambiar nombre Borrar 


LienzoDibujos 
ColorDeFondo 
[] Por defecto 
ImagenDeFondo 
Ninguno... 
Tamaño de letra 


140 


Alto 


Ajustar al contenedor... 


Ancho 
70 ресе... 


AnchoDeLinea 
20 


ColorDePintura 
H Por defecto 
PosiciónDelTexto 


centro : 1 ~ 


Visible 
[Г] 


hoya 


Paleta Visor 





interfaz de usuario 

| Mo strar en el Visor los componentes ocultos 
Disposición 
A DisposiciónMorizonta 


МӘ HonzontalScrollárrangement > 


(11 DisposicionTabular 


. DisposiciónVertical. 





J VerticalScrollArrangement 


Medios 

Dibujo y animación 
Maps 

Sensores 

Social 
Almacenamiento 
Conectividad 


LEGO® MINDSTORMSD 


Volver a Pag. Principal 


Experimental 


Extension 





3. Pon el botón Borrar dentro del 
DisposiciónVertical. 


Los dibujos de Sarah 








Volver a Рад. Principal 


c Ss ==] 


4. Añade tres botones más bajo el botón Borrar. 


Wisor 


= 
L Mostrar en el Visor los componentes ocultos 


ar para previsualizar ai tamaño de la tablet 


Los dibujos de Sarah 


Texte para Ecten1 
Texte para Boton 


Texto para Eotóna 


Wolver a Pág. Principal 





5. Renombra los tres botones como «Rojo», «Azul» y 
«Verde». Elimina el texto de cada botón, cambia 
su Alto a 50 píxeles y su Ancho a Ajustar al 
contenedor. Cambia el color de fondo en función 
del nombre del botón. 


Visor Componentes 
T Dibujos 
E M uenicalscrolarrangemen I 


^ IMisdibujas 





= Disposición crizartalz 
Drero 


— Ai COL [S 


Negra 


2 Beisbol 
will Elanzo с 
B Poisposiciónkorizontal! | 
A LienzoDibuios Tamaño de letra 
la B nispasiciánvert cal El 


Е oran Tipo Dec 
por detecto - 


—FPagPnnegqal 





ТП n 


Imagen 


Cambiar nombre — Borrar Mirco. 
E Forma 
Medios 


nor defecto + 





MoectrarPuzación 
: РА 
Rambow. JPG кагы 





gatol jpg 


amagenzperál joo 


6. Haz visible nuevamente el LienzoDibujo. 


Eh astrar en el Visor los componentes ocultos 


Programa la 
sobre las fotos 


Ahora que tus colores están 


programarlos para 
Sigue estos pasos: 





Componentes. Propiedades 


enzo bujias 











Dibujos 


E Ў verticalSaornllArranqementl ColorDeFondo 


A Misdibujos [| Par defecto 


P. FA = 
= DiaposiciónHarizental2 magenDeronda 


x HI.. 
= Fero 
ЧЫ Arcoris maño de letr 
= вера! 
iai Blanco Alto 
Ий os E pm 
= Disposición Horizontal] "wes mm 
ч lus i 5 zu |: 
«A LienzaDiburoa: Anch 
= J pispasiciórvertical 7) percer... 
= BorerDibujo AnchoDeLiínez 
= Rojo т 
мм Col DE Intura 
= verde Por defecto 


ZIPagPnncpal PosicinnDelTexio 
centra: 1 * 
Jii | + 


Cambiar nombre. | Borrar 





* л 
x | 
> - 


BaseballField jpg 


capacidad de dibujar 


listos, tienes que 
que dibujen sobre tus fotos. 


1. De nuevo en la pantalla Bloques (haz clic en el 
botón Bloques, arriba a la derecha), añade tres 
bloques de programación: CUANDO ROJO.CLIC, 
CUANDO AZUL.CLIC y CUANDO VERDE.CLIC. 





tE Којо * Re 


ejecutar 


eu Azul = Kei 


ejecutar 


әк Verde * Жет 


ejecutar 


2. Ahade un bloque PONER 
LIENZODIBUJO.COLORDEPINTURA a cada uno de 


los bloques del paso 1, y coloca el color correcto 
en cada uno. 






ТЕ ROJO = Ker 
dc] M und LienzoDibujos * ' como 
E 


"IUD Azul = Ker 
Sos ол LienzoDibujos ~ IN ColorDePintura como 
У... 


ЕЦЩ Verde ~ Же» 
с Ч LienzoDibujos = 
— 





O 
(9: 


со 


Encontrarás los bloques de colores dentro de 
categoría Integrados. 


Bloques 


© Integrados 


| > 





[8] Control 


a Logica 


Visor 
Bl Matemáticas - 





Bl тео 

E Listas = 
сасе 

Bill variables 


L] Procedimientos 


3. Desde LienzoDibujos, arrastra los bloques 
CUANDO LIENZODIBUJOS.ARRASTRADO y LLAMAR 


la 


LIENZODIBUJOS.DIBUJARLÍNEA a tu área de 
programación. 


"run LienzoDibujos * PUES EOE 


ЭТТИ rua LienzoDibujos ‚Ж әт: 
x1 
y1 
x2 
y2 





4. Ponte encima de XPrevio y arrastra un bloque 
TOMAR XPREVIO a la ranura x41. Haz esto con 
XPrevio, YPrevio, XActual e YActual. 


БЕ LienzoDibujos * irc rs 


ejecutar llamar LienzoDit 0 


ТЕ LienzoDibujos ~ Music 


ejecutar llamar Dibujart ínea 
' 8 010-8 XPrevio + ` 
y1 71770 YPrevio + 
"MEE ur a XActual + 
y2 ya YActual + | 





5. Ultimo paso, similar a los pasos 3 y 4: añade los 
bloques CUANDO LIENZODIBUJOS.TOCAR y 
LLAMAR LIENZODIBUJOS.DIBUJARPUNTO de modo 
que también puedas dibujar puntos en el Lienzo. 


ТЕ LienzoDibujos * Ж р 


ejecutar llamar DibujarPunto 


X x 
y | tomar Y 7 





6. Prueba tu app. Asegúrate de que puedes dibujar 
sobre las fotos y borrar la pantalla. 





Volver a Pág. Principal 





PROYECTO 4 
Crea un juego 
móviles 





para 








iEn este proyecto aprenderás a crear un 
juego! Primero aprenderás a hacer que una imagen 
se mueva por la pantalla. Luego aprenderás a hacer 
que la imagen  «recoja» puntos. Finalmente 
aprenderás a añadir más características al juego, 
como que aparezcan elementos еп lugares 
aleatorios. 


ELIGE UN JUEGO 


Antes de comenzar a construir, tienes que decidir 
qué tipo de juego quieres. Este libro te enseña a 
crear un juego que consiste en dar a un perrito toda 
la comida posible en un corto periodo de tiempo. Se 
parece un poco a Pac-Man comiendo los puntos 
amarillos, a Flappy Bird recogiendo monedas o 
incluso a Mario o Sonic. Pero esta versión es un poco 
más sencilla. 


PREPARA TU APLICACIÓN 


Para comenzar a trabajar en tu app, tendrás que 
crear un nuevo proyecto en tu App Inventor. Luego 
podrás preparar la versión básica del juego. 


Crea un nuevo proyecto 

Si has estado siguiendo el libro, este será el tercer 
proyecto que crees, de modo que debería ser algo a 
lo que ya estás acostumbrado; pero si necesitas 
ayuda, consulta los proyectos previos para obtener 
más detalles. 


1. Ve a appinventor.mit.edu. Haz clic en el botón 
Create Apps e ingresa. 


2. Crea un nuevo proyecto: abre el menú 
desplegable Proyectos y selecciona Comenzar un 
proyecto nuevo. 


3. Llama a tu proyecto «AlimentaAWinston». 


¡Ya estás listo! ¡Puedes comenzar a diseñar tu 
pantalla y programar tu juego! 


Prepara tu pantalla 

Antes de empezar a programar tendrás que crear la 
pantalla. Para la primera versión de este juego, es 
algo sencillo: basta con que sigas los pasos 


sigulentes. 
1. Arrastra un Lienzo a tu pantalla. 


Lo hallarás en la sección Dibujo y animación de la 
columna Paleta. 


Paleta Visor 


Interfaz de usuario 


Mostrar en el Visor los componentes ocultos 


Disposición 


Medias 





Dibujo y animación 





2. Haz que el Lienzo llene la pantalla. Pon el Alto y 
el Ancho a Ajustar a contenedor. Luego haz que el 
color de fondo sea turquesa. 


Propiedades 


Lienzo] 


ColorDeFondo 
[] Turquesa 


ImagenDeFondo 


Tamaño de letra 


3. Arrastra un Spritelmagen a tu Lienzo. 


Lo encontrarás dentro de la sección Dibujo y animación 
de la columna Paleta. 





AlimentaA Winston 


La Lienzo | 


= sbrideimagen] 





4, Convierte el Spritelmagen en Winston siguiendo 
estos pasos: 


o Descárgate la imagen «Winston.png» que encontrarás 
en www.thewecan.zone/mobile-apps, dentro de 
SAMPLE PICTURES, y cárgala en App Inventor. 


o Pon a Winston como imagen del Spritelmagen y 
cambia el nombre a «Winston». 


o Cambia el A/to y el Ancho a 50 píxeles. 


Visnr Componentes Propiedades 


Paneerinin 





iEnhorabuena! Ahora puedes programar a Winston 
para que se mueva por la pantalla. 


CREA UN JUEGO SENCILLO 


Dar con una idea novedosa para un juego puede 
resultar un poco dificil; cuando comienzas es 
recomendable construir a partir de cosas que ya 
conoces. Para esta aplicación necesitas un juego 
que quepa en una sola pantalla, con un personaje 
que puedas mover y algo que este pueda recoger. 
Piensa en otros juegos a los que hayas jugado y que 
sean parecidos. (SUGERENCIA: Pregunta a tus 
padres a qué juegos les gustaba jugar cuando eran 
más jóvenes.) Sigue los pasos de las dos secciones 
siguientes para construir el juego. 


Programa a Winston para que se 


mueva 

Ahora que Winston está en la pantalla, puedes 
programarlo para que se mueva. Haz clic en el botón 
Bloques, en la esquina superior derecha, para 
acceder al área de programación. 


Luego sigue estos pasos: 


1. Haz que Winston se mueva cuando hagas clic en 
él: en la columna Bloques, selecciona Winston y 
arrastra un bloque CUANDO WINSTON.TOCAR a tu 
visualizador. 


Bloques Visor 
© Integrados 
o Control 
E Logica 
Mitatemáticas 
Beo 
B Listas XN 
colores ejecutar 
[8 variables 


lll Procedimientos е 


«ТЕП Winston * Ml 





= Screen] ^ 





& Cualquier componente 


2. Fija la velocidad de Winston: bajo Winston, en la 
columna Bloques, arrastra un bloque PONER 
WINSTON.VELOCIDAD al bloque CUANDO 
WINSTON.TOCAR que añadiste en el último paso. 
Luego haz clic en Matemáticas, en la columna 
Bloques, y busca un bloque numérico para 
conectarlo. 


SIEG Winston * Bios 






ejecutar , Poner Velocidad * ду, 5 


3. La programación de la versión sencilla está casi 
completa. Pruébala en tu emulador o en tu 
dispositivo Android. 


Para probar tu programación, haz clic sobre Winston: 
debería comenzar a moverse. 


CE 5554:<build> 


Stop this application 


About this application 


Settings 





@ 


5 
& 
со 


Si no recuerdas cómo probar tu programación, vuelve a 
leer la sección «Prueba tu app» en el Proyecto 3. 


iQue Winston no se detenga! 
Si pruebas tu app y haces clic sobre Winston, verás 


que deja de moverse cuando llega al borde. 
Para arreglar esto, añadamos algo al programa. 
1. Desde Winston, en la columna Bloques, arrastra 


un bloque CUANDO WINSTON.TOCARBORDE a tu 
visualizador. Luego anade un bloque LLAMAR 


WINSTON.BOTARBORDE al bloque CUANDO 
WINSTON.TOCARBORDE que acabas de arrastrar. 


Тее Winston = рк: l 


Sera FEM Winston Ж ЕП 


borde ij 


— 





2. Desde Variables, en la columna Bloques, arrastra 
un bloque TOMAR y conéctalo al bloque LLAMAR 
WINSTON.BOTARBORDE. Escoge Borde en el menú 
desplegable. 


E Toca rBorde 


ejecutar Ilamar Botar 
borde Ü tomar 





м. 


3. Vuelve a probar tu арр. 


Regresa a tu app y verás que Winston avanza y retrocede 
por toda la pantalla, y rebota al tocar un borde. 





Haz que Winston escuche 
Ahora que Winston ya se puede mover, deberías 
hacer que vaya donde tü quieras que vaya. 


1. Desde el Lienzo, en la columna Bloques, arrastra 
un bloque CUANDO LIENZO1.PRESIONAR a tu 
visualizador. 


erEupaMLienzoi * Bii 


ejecutar 





2. Desde Winston, en la columna Bloques, arrastra 
un bloque LLAMAR 
WINSTON.APUNTARENLADIRECCIÓN a tu bloque 
PRESIONAR. 


экн Lienzol = ШЕСТЕ 


ЭЕ ЕТТ Winston * Mie а» 


x 1 
A 





3. Desde Variables, arrastra dos bloques TOMAR 
para conectarlos a tu bloque 
APUNTARENLADIRECCIÓN, y en sus menüs 
desplegables, ponle a uno x y al otro y. 


«Те Lienzo1 = Baci 


ОТТИ ura Winston * үе: ое 
X tomar XT 
y ЕУ”. 





w 


4. Vuelve a probar tu app y observa qué ocurre 
cuando tocas cualquier parte de la pantalla. 





Alimenta a Winston 
Ahora que Winston ya es capaz de moverse por la 
pantalla, idale algo de comida! 


1. Descarga comida de perro: ve a 
www.thewecan.zone/mobile-apps y, en SAMPLE 
PICTURES, descarga la imagen «food.png». 


2. Añade la comida a tu aplicación: regresa a la 
pantalla Disenador y anade otro Spritelmagen a 


tu app. 


Visor Componentes 


- "zpriteimagen] 





3. Prepara tu sprite de comida: cambia la imagen de 
tu nuevo Spritelmagen y renómbralo como 
«Comidal». Luego redimensiona el A/to y el Ancho 
de Comidal a 25 píxeles. 


Componentes Propiedades 


беери Comida] 
3 Wi Lienzo] Habilitado 
í : my] 
<š Winston Ë | 
;* Comidal Dirección 
Alto 
LL к= 
Ancho 
IL ERG 
Intervalo 
100 
Foto 
dad'aad ang 


4. Establece qué ocurre cuando Winston colisiona 
con la comida: desde Winston, en la columna 
Bloques, arrastra un bloque CUANDO 
WINSTON.ENCOLISIÓNCON a tu visualizador. 


"Eun Winston т sies eie 


ejecutar 





O 
ғ 
(9: 


со 





«Colisionar» significa chocar, de modo que 51 рог 
accidente chocas con un poste, es que has colisionado 
con él. 


5. Desde Control, arrastra un bloque SI... ENTONCES 
a tu bloque ENCOLISIONCON. 


«Т Winston = Beier 


ejecutar MT 
entonces 
== 





6. Desde Lógica, arrastra un bloque = a tu bloque 
SI... ENTONCES. 


nv EnColisiónCon 






ejecutar |=: si E! cua el 


entonces 





y— 


7. Desde Variables, arrastra un bloque TOMAR a tu 
bloque -, y en el menu desplegable, selecciona 
otro. 


«Eu Winston т Ae ien 


ejecutar | 5 NE otro т. ZEL | 


entonces 
t= 





о 
(o; 


co 


«Otro» es tan solo el nombre de todo aquello que 
Winston toque. Más tarde, cuando añadas más bloques 
de comida, «otro» se referirá a cualquier bloque de 
comida con el que colisione, no solo a Comidal. 


8. Desde Comida], al final de la lista, arrastra un 
bloque COMIDA1 a tu bloque =. 


ejecutar [O| si 


entonces | 





Lo 





9. Desde Comidal, arrastra un bloque PONER 
COMIDA1.VISIBLE a tu bloque SI... ENTONCES. 


eE Winston EnColisionCon 


ejecutar (2) si tomar oto > "Comidai > 


е Ч Comidal ~ B Visible como 
Me 


W. 





10. Desde Lógica, arrastra un bloque FALSO a tu 
bloque VISIBLE. 





сото falso 





11. Vuelve a probar tu app. Cuando Winston colisione 
con Comidal, esta debería desaparecer. 


LE 5554:<buikt> -0 х O Tum m xF 


DAE 12:01 ru DAD 12:01 „м 


Screen1 screen? 


© mmm pa mms 


€ á а е Ñ K k ТЕМ " > 





¡Enhorabuena! ¡Ya tienes la versión sencilla de 
«Alimenta a Winston»! Las próximas secciones te 
enseñarán cómo hacerlo aún más entretenido. 


HAZ QUE SE PUEDA VOLVER A JUGAR 
Como habrás comprobado, una vez Winston se 
come su alimento, lo único que hace es ir de un lado 
a otro de la pantalla hasta que sales de la app. Para 
que el juego resulte un poco más divertido, añade 
más comida y la capacidad de volver a comenzar el 
juego. 


Haz que Winston se sacie 


Esta sección te enseña cómo dar más comida 
Winston: ¡nada menos que diez cuencos! 


1. Ve a Diseñador y añade nueve Spritelmágenes 
más a tu Lienzo. 


TUS Components 
== - 
Display hidden components in Viewer zug 
; ces E $ Ә HS Lienzo 
= Winston 
< Gorda 
Imagespntel 
ImageSprte? 
ImageSprte3 
< Imagesnnteá 
= ImageSpnte5 
“п age5pnteb 
“пап КШ 
= ImageSpriteg 


294 ImageSprite) 





2. Renombra los sprites «Comida2» a «Comida10»; 
cambia sus imágenes por «food.png», y su Alto y 
su Ancho a 25 píxeles. 


Propiedades 


Ppr бейсі = 





Programa la comida de Winston 

Ahora que Winston tiene un montón de comida en la 
pantalla, has de asegurarte de que si tropieza con 
cualquiera de los cuencos de comida, este 
desaparecerá. 


1. Regresa a Bloques (el área de programación). 
Busca el bloque CUANDO 
WINSTON.ENCOLISIÓNCON que ya has hecho, y 
haz clic en el botón azul del bloque SI... 
ENTONCES que se halla dentro. Luego arrastra un 
bloque SI NO, SI al bloque SI que se despliega. 


сизпао Wi 


ejecutar “O| si 





2. Haz cambios en este nuevo bloque para que sea 
igual que el código para Comidal. Sin embargo, el 
nuevo bloque debería llamarse «Comida2» en 
lugar de «Сотіда1». 


Те Winston EnColisiónCon 


ejecutar |= si 


7724 otro = H = " HN Comida 

ES Comidat + MN Visible ш. 
llt | 

sino, 9 ши otro” w=" 


entonces 










| ин 





¡ESPERA! ¡Esto nos va a llevar una vida! Tomemos 
un atajo: en lugar de hacer esto para cada cuenco, 
pongamos toda la comida en una lista y luego 
usemos una iteración con ella. 






© 
d 
«lterar» significa hacer algo repetidamente. Еп 
términos informáticos, suele significar repetir una 
acción mediante una secuencia de números o 
valores: el ordenador realiza la acción para el primer 
valor, luego la repite para el segundo valor, luego 
para el tercero, etcétera. En este caso tenemos una 
lista de cuencos de comida, e iteraremos con esa 
lista para que todos se hagan invisibles cuando 
Winston colisione con ellos. 


Sigue los siguientes pasos para iterar con todos los 
cuencos de comida: 


1. Crea una lista: desde Variables, en la columna 
Bloques, arrastra un bloque INICIALIZAR GLOBAL a 
tu visualizador y renómbralo como «laComida». 
Luego, desde Listas, en la columna Bloques, 
conecta un bloque CREAR UNA LISTA VACÍA al 
bloque INICIALIZAR GLOBAL. 





inicializar global Ma CONT о crear una lista vacía | 


2. Anade elementos a la lista: desde Listas, arrastra 
un bloque ANADIR ELEMENTOS A LA LISTA al 
bloque CUANDO WINSTON.TOCAR, dado que es el 
que inicia el juego. Haz clic en el botón azul del 
bloque ANADIR ELEMENTOS A LA LISTA y 
asegúrate de que hay diez elementos en la lista. 


PASO 1 PASO 2 


TE е WIN 


| 
| elemento 
М... 





der MI Winston ~ B Velocidad - т 


a. añadir elementos alalista lista L 
item 





Sg "uros - MA COMO 
= 


(o айафг еіетепіоѕ a lalista lista M 


| 
term MM 


cuando 


ce ES Winston * MM Velocidad ~ E= (Urea 5 
ò anadir elementos a la lista lista | 
| item 

tem 
tem 
tem M 
tem | 
tem | 
tem 
tem М 
tem 


tem i 





elemento 
elemento 


y £51 Qo elemento 


elemento 





elemento 


3. Escoge la lista: desde Variables, arrastra un 
bloque TOMAR y ünelo al bloque ANADIR 
ELEMENTOS que encabeza la lista. Asegurate de 
que la selección del desplegable es global 
laComida. 


ЕТЕ Winston 


Jue Winston ` I velocidad "ea como 5 


О он И global laComida + 

tem 

tem N 
item | 
item | 
tem | 
tem 

tem 

tem 
item | 








4. Anade los elementos: bajo cada elemento de la 
sección Componentes, a la izquierda, verás un 
bloque verde con el nombre del elemento, como 
«Comidal», al final de la lista de bloques que 
puedes usar. Arrastra y une esos bloques de 
comida (COMIDA1 a COMIDA10) a las ranuras de 
los bloques ITEM de tu bloque AÑADIR 
ELEMENTOS. 


cuando 





su PIE Winston * B Velocidad ~ 
(с. añadir elementos ala lista lista global laComida 
item Y | 
item 
item 
item 
item 
item 
item 


йет 


йет 


йет 


5. Cambia tu bloque de colisión: quita los bloques = 
y PONER VISIBLE de tu bloque SI... ENTONCES. 
Luego, retira la parte SI NO, SI haciendo clic en el 
botón azul del bloque SI... ENTONCES y 
arrastrando el SI NO, SI hacia fuera. Luego, desde 
Listas, arrastra un bloque ¿ESTÁ EN LA LISTA? y 
únelo a tu bloque SI... ENTONCES. 


Т9 Winston * Baie өү 


ejecutar х si ¿Esta en la lista? cosa 
lista 


entonces 
. — 





6. Anade la lista a iterar: desde Variables, arrastra 
dos bloques TOMAR hasta tu bloque ¿ESTÁ EN LA 
LISTA? Pon en uno <otro> y en el otro <global 
laComida>. 


litri Winston > Aj өү 


ejecutar “| si | ¿Estàenlalista?cosa — tomar Ал 
| 


ir ME 178 global laCom 


antonces 


| 









d 
El bloque ¿ESTÁ EN LA LISTA? comprueba si cierto 
elemento (como otro, que se refiere a todo aquello con lo 
que Winston colisione) está en una determinada lista. De 
modo que este bloque comprueba si Winston һа 
colisionado con un cuenco de comida, dado que la 
comida es el ünico elemento de la lista «laComida». 


‚ En tu sección Bloques, ve hasta el final a buscar 


Cualquier componente y haz clic en Cualquier 
Spritelmagen. Anade un bloque PONER 
SPRITEIMAGEN.VISIBLE a tu bloque SI... 
ENTONCES. 


© Cualquier componente 


e CualquierLienzo 


 CualquierSpritelmage 


cuango 


ejecutar |©] Si 1 ¿Está enlalista?cosa | tomar otro 
lista wura global laComic P 
Uc | ропег5ргїеїтадеп. Visible + 
del componente 


como f 








8. Desde Variables, arrastra un bloque TOMAR a la 
sección DEL COMPONENTE de tu bloque VISIBLE. 


EnColisiónCon 
ejecutar | si ¿Esta епа иѕіа? ссѕа tomar Otro T 


1 global laComida -— 


aia 
к=] | 


emonces poner Spritelmagen. 
ae Inu о ото > 


como 





9. Desde Lógica, arrastra un bloque FALSO a la 
sección COMO de tu bloque VISIBLE. 


ТЕ Winston + Majes өз 


ejecutar | si ¿Está en la lista? cosa | tomar ТЕД 


БЕШ i'd global laComida + 
rre iva isse n DIM Visible + 
del componente ШЕ otro т 


ELI falso - | 






10. Desde Control, arrastra un bloque POR CADA 
ELEMENTO EN LA LISTA hasta tu bloque CUANDO 
WINSTON.TOCAR. 


ЕН е Winston * Mide" 


si: с А ua Winston * B Velocidad ~ Ше 


| 


с. añadir elementos а la lista lista | 


tem 











item 
item 
A Comida4 + 


item 
tem 


tem 
item 
item 


item 





е. 1 eleme еп la lista 
ejecutar 


— 


11. Pon la lista a «global laComida» y cambia la 
propiedad Visible de cada item a cierto. 


"1-18 Winston = 7 


зс urs Winston ~ BI Velocidad + д, 
(27 añadir elementos ala lista lista (` EE global laComida - 
MI Comida1 ~. 

;o0midaz2 














Comida9 - 
ый, ЕТ elemento 121 ЕЕЕ 7.177 global laComida » 
SAS Ea Visible + ` 
С A elemento + 
LUE cierto > 






Mostrar avisos 


¡Uf! ¡Han sido muchos pasos complicados! Deberías 
dedicar un tiempo а repasar estos pasos 
cuidadosamente, hasta que estés seguro de saber 
todo lo que había que hacer. 


Prueba tu juego 
Es hora de poner a prueba tu app. Tu programación 
debería verse así: 


cuando ТӨЛӨП v Tocar 


O ТҮ 


Pu Winston = BZ 


jj si 


por cada ЕТТТ] enla lista us s glob 
sr piner Soriteimagen. Visible - 
del componente 


DE TITIO 





Cuando ejecutes tu app, deberías poder hacer que 
Winston pasee por la pantalla y recoja toda la 
comida. 









< 

Tienes que hacer clic sobre Winston para que 
empiece a moverse y para que toda la comida 
vuelva a verse. 





N. 
д2? 


VERDA 


Dado que la app se está complicando, tardará un 
poco más en cargarse en el emulador o en tu 
dispositivo Android. ¡Ten paciencia! 


HAZ QUE EL JUEGO SEA ALEATORIO 


Por ültimo, para que el juego sea un poco más difícil, 
puedes hacer que la comida aparezca en lugares 
diferentes cada vez. 


Anade botones de comienzo y reinicio 
Antes de introducir la aleatoriedad, tienes que 
anadir los botones de comienzo y reinicio para 
asegurarte de que todo sucede cuando debe. Sigue 
estos pasos: 


1. Ve a Diseñador y añade un DisposiciónHorizontal a 
la sección Disposición. Anádelo por encima de tu 
Lienzo. Asegürate de que el Ancho es Ajustar al 
contenedor y el Alto es Automático. 


Visor Componentes Propiedades 
| oe = —Ü DisposiciónHorizontall 
- Mostrar en el Visor los componentes ocultos screen] 
Е 1 - РО - 

 DrsposicionHonizental 1 DispHorizontal 
3 i Lienzo] Izquierda: 1 = 

= Winston Dispwertical 

M comida Arriba: l = 
= comida? ColorbeFondo 


B Por detecto 


Comida 
* comidas Alto 
= comidas UN 
= comidas Ancho 
mt йү ата 

* Comida z 
= comidas Imagen 
= romidas airt 
* Comida! Ü үн 

Iv 








2. Ahade dos botones a la DisposiciónHorizontal, uno 
llamado «Comienzo» y con la palabra Comienzo en 
él, y el otro llamado «Reinicio» y con la palabra 
Reinicio en él. 


кз Pm. SE Е 
=  DiposicionHornzontall 
Comienzo 


 Aeinicio 





© £ALienzol 


. Ve a Bloques y programa tu botón Comienzo: 
desde Comienzo, arrastra un bloque CUANDO 
COMIENZO.CLIC a tu visualizador. 


I-II Comienzo ~ Же 7» 





. Mueve el bloque PONER WINSTON.VELOCIDAD 
desde CUANDO WINSTON.TOCAR hasta CUANDO 
COMIENZO.CLIC. 


«1-1: Comienzo = 
ejecutar ‚ Poner Winston ~ B Ve 





















. Desde Reinicio, arrastra un bloque CUANDO 
REINICIO.CLIC a tu visualizador. 


ГЕШ» Reinicio * Ke Is 


ejecutar 





. Mueve los demás bloques que hay bajo CUANDO 
WINSTON.TOCAR a CUANDO REINICIO.CLIC. 


a! 


SNE SEC E la global laComida r 


tem 
tem 
item 
tem 
item 
item 
item 
item 
tem 
tem 
por cada en la lista 
enc Senn Visil TED š 
del componente 


Como 





7. Tu bloque CUANDO WINSTON.TOCAR debería estar 
vacío. Bórralo. 


8. Por último, arrastra un bloque PONER 
WINSTON.VELOCIDAD a tu bloque CUANDO 
REINICIO.CLIC. Desde Matemáticas, añade un 
bloque para poner la velocidad a 0. 


"ici. Reinici 


uen ced Winston * 


o. añadir elementos a la lista lista ' global laComida + 


| 
рогсайа[ ¿Jen la dista 





Uca Visible = 
del componente elemento + 


como 





Mostrar avisos | 


Prueba tus botones de comienzo y 
reinicio 
Ahora que ya tienes tus dos botones, ¡pruébalos! 





ENCIA 


A 
< 


Cuando ejecutes tu app en el emulador o en tu 
dispositivo Android, deberías hacer clic primero en 
el botón Reinicio, y luego en Comienzo. Hacer clic 


primero en Reinicio asegura que toda la comida 
entre en la lista que has realizado. 


Asegúrate de que al hacer clic en Reinicio, Winston 
se detiene y la comida reaparece, y de que al hacer 
clic en Comienzo, Winston empieza a moverse. 





Pon tu comida en lugares aleatorios 
Ahora que eres un experto en iterar listas (aplicar 
una misma acción a todos los elementos de una 
lista), la siguiente sección te resultará sencilla. 


1. Desde Control, arrastra otro bloque PARA CADA 
ELEMENTO EN LA LISTA a tu bloque CUANDO 
COMIENZO.CLIC. Debes colocar este nuevo bloque 
después de haber añadido los elementos a la 
lista, pero antes de hacerlos visibles. 


item 


item Comida10 = | 


por cada en la lista 
ejecutar 
por cada а enlalista 
A EEN Visible * MI 
A uc. elemento > 


como cierto * 





2. Anade un bloque TOMAR GLOBAL LACOMIDA al 
bloque PARA CADA ELEMENTO DE LA LISTA. En 
Cualquier componente, haz clic en Cualquier 
Spritelmagen y arrastra un bloque LLAMAR 
SPRITEIMAGEN.MOVERA al bloque PARA CADA 
ELEMENTO DE LA LISTA. 


por cada [ ` en la lista ¡(Mya globa 
ejecutar llamar ImageSprite MoverA 


para el componente 


k 


эиес, ку elemento с ЕЕ global laComida í 


Jae r ЕТ Visible 
del componente 


como 





3. Anade un bloque TOMAR, de Variables, al 


componente de tu bloque MOVERA, y colócalo en 
Elemento. 


GUNHA IU T 
por cada [. IET ШЕ ЕШ ud global laComide 
ejecutar — llamar ImageSprite.MoverA 


"КЕ Kes A a elemento + 


= 
ч y - 





por сада en la lista urs global laComida • 
SS Ea Visible + 
С ОЕ elemento 


como 





4. Desde Matemáticas, arrastra dos bloques ENTERO 
ALEATORIO ENTRE y situalos en las ranuras x e y 
de tu bloque MOVERA. 


| Агы 7 
por cada en la lista wurd global laComida = 
ejecutar llamar ImageSprite MoverA 

para el componente Ей elemento + 
X entero aleatorio entre ED y 


У Ú entero aleatorio entre | A 100 
K. o —r r r r oQTT = Ж 
por cada ее ¿en la lista ОТИ global lat 


ЗС ЗЕТ Visible + 


apee ea ele 








5. Borra los bloques 100 de ambos ENTERO 
ALEATORIO ENTRE y sustitúyelos por 
LIENZO1.ANCHO y LIENZO1.ALTO. 


Hallarás Ancho y Alto haciendo clic en L/enzol. 


por cada en la lista yea global laComide 
ejecutar | llamar ImageSprite MoverA 
"ЕЕ ЫДА ТЯ elemento = | 


A entero aleatorio entre &Ü y 


y entero aleatorio entre &Ü y 


М 


por cada Ё ` Е И ui š global laComida í | 
Sie»! Sg IIRS. Ен Visible + | 
del componente Ей elemento + 


Como Cierto * | 





6. Ahora, cada vez que hagas clic en Reinicio, tus 
diez cuencos de comida aparecerán en diferentes 
lugares del Lienzo. 


Screen 





iUau! ¡Enhorabuena! ¡Has construido una aplicación 
genial para móviles! A partir de aquí puedes añadirle 
más elementos, como un cronómetro u obstáculos 
aleatorios que hagan que Winston se mueva más 
lento o más rápido. ¡Haz pruebas! 


Aquí está toda la programación de tu juego 
«Alimenta a Winston»: 


A15. -1 elementa И global lacomia > 
A A RN boo er 


para el componente i 


Х \. епіего аіезіото епе | 8} у 


И i ДИ Lienzot =] 


== 





También puedes jugar con mi versión, que tiene 
diferentes niveles de dificultad. Puedes bajártela de 
www.thewecan.zone/mobile-apps. Descárgala en 
tu dispositivo Android, ábrela e instálala. ¡Deberías 
poder jugar con ella! 


SIGUE CONSTRUYENDO 


Ahora que ya has construido cuatro apps distintas, 
es hora de poner tus habilidades a prueba. ¡Sigue 
construyendo y probando cosas! Usa nuevos 
componentes que no hemos tocado en este libro, 
como TextloSpeech, VideoPlayers o incluso sensores 
como el podómetro (que cuenta los pasos que das). 





ER 

Programar puede ser difícil, y a veces el software no 
funciona. Si te quedas atascado, date un descanso, 
déjalo un rato y vuelve cuando sientas que puedes 
concentrarte mejor. Siempre es buena idea pedir 
ayuda, o simplemente explicar a alguien tu 
problema: a veces, explicar tu problema en voz alta 
te ayuda a ver la solución por ti mismo. 


iFeliz programación! 
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